<template>
	<view>
		<nav-bar title="搜索店铺"></nav-bar>
		<search placeholder="请输入门店名称" :value="keyword" @search="search"></search>
		<scroll-view scroll-y :style="{ height: mainHeight }" class="contain">
			<shop-list v-if="shopData.length > 0" :shopConfig="shopData" @toDetail="clickToDetail"
				@toPreserve="toPreserve"></shop-list>
			<view v-else class="bo-data">
				<image class="img" :src="baseImgUrl + 'img_no_address.png'" alt="" />
				<view>暂无搜索结果</view>
				<view>请换个关键词试试吧~</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import NavBar from "../../components/nav-bar";
	import Search from '../../components/search/index'
	import shopList from "@/subPages/components/shopList"
	import api_home from '@/api/home'
	import pageConfig from '@/config'
	import {
		getToken
	} from '@/utils/auth'
	export default {
		name: "searchShop",
		components: {
			NavBar,
			Search,
			shopList
		},
		data() {
			return {
				baseImgUrl: pageConfig.baseImgUrl,
				mainHeight: '',
				keyword: '',
				obj: {},
				shopData: [],
				token: getToken(),
			}
		},
		created() {
			this.mainHeight = this.$store.getters.heightData.noTabSearchHeight
		},
		onLoad(options) {
			if ('params' in options) {
				this.obj = JSON.parse(decodeURIComponent(options.params))
			}
			if ('searchValue' in options) {
				this.search(options.searchValue)
				this.keyword = options.searchValue
			}
		},
		methods: {
			clickToDetail(item) {
				const storeAddress = item.provinceString + item.cityString + item.countyString + item.detail
				const transferData = {
					storeId: item.id,
					storeName: item.storeName,
					regionId: item.regionId,
					regionName: item.regionName,
					storeAddress,
					openingTime: item.openingTime,
					closingTime: item.closingTime
				}
				const params = encodeURIComponent(JSON.stringify(transferData))
				uni.navigateTo({
					url: `/subPages/home/shopDetail?transferData=${params}`
				})
			},
			toPreserve(item) {
				if (!this.token) {
					this.$tab.navigateTo('/subPages/home/login')
					return
				}
				const storeAddress = item.provinceString + item.cityString + item.countyString + item.detail
				const transferData = {
					storeId: item.id,
					storeName: item.storeName,
					regionId: item.regionId,
					regionName: item.regionName,
					storeAddress,
					openingTime: item.openingTime,
					closingTime: item.closingTime
				}
				const params = encodeURIComponent(JSON.stringify(transferData))
				this.$tab.navigateTo(`/subPages/home/reserveProject?transferData=${params}`)
			},
			search(value) {
				const params = {
					...this.obj,
					storeName: value
				}
				api_home.fetchShopList(params).then((res) => {
					if (res.data.length > 0) {
						res.data.forEach((item) => {
							item.images = item.images.split(",")[0]
						})
						this.shopData = res.data
					} else {
						this.shopData = []
					}
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.city {
		color: rgba(255, 255, 255, 1);
		display: flex;
		margin-right: 20rpx;
		transform: translateY(15rpx);
	}

	.contain {
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;
		width: 100%;
		padding-top: 25rpx;
		margin-top: 40rpx;

		.bo-data {
			display: flex;
			justify-self: center;
			align-items: center;
			flex-direction: column;
			font-size: 30rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 43.44rpx;
			color: rgba(51, 51, 51, 1);
			text-align: justify;
			vertical-align: top;

			.img {
				width: 80%;
				height: 500rpx;
			}

		}
	}
</style>